<template>
  <div class="msg-item-wrapper">
    <div class="msg-item" :class="pstStyle">
      <el-avatar class="avatar" :size="38" :src="avatarUrl" />
      <div class="message">{{ msg }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MsgItem',
  props: {
    avatarUrl: String,
    msg: {
      type: String,
      default: "test message"
    },
    posistion: {
      type: String,
      validator(value) {
        return ['left', 'right'].includes(value)
      },
      default: 'left'
    }
  },
  data() {
    return {

    }
  },
  computed: {
    pstStyle() {
      return this.posistion == "right" ? 'msg-right' : 'msg-left'
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.msg-item {
  display: flex;
  padding: 12px 0;
  font-size: 12pt;

  &.msg-left {
    flex-direction: row;
  }

  &.msg-right {
    flex-direction: row-reverse;
  }

}

// .avatar {}

.message {
  padding: 8px 12px;
  border-radius: 8px;
  // border-top-left-radius: 0px;
  background-color: var(--el-color-info-light-7);
  margin: 0 6px;
}
</style>
